出处：掘金

原作者：金泽宸

构建一个“配置即页面”的系统，不是为了少写代码，而是为了少改代码

写在前面

当前端系统规模日益庞大、业务变更频繁时，我们需要从“写死代码”转变为“平台配置驱动”：

• 让运营能拖拽生成页面
• 让产品能配置组件逻辑
• 让前端只需维护平台架构和低代码引擎

这一篇，我们系统拆解可配置平台的演进路径：组件 → schema → DSL → 可视化低代码平台

典型场景：为什么要可配置？

平台演进路线

graph TB
A[纯组件封装] --> B[配置驱动组件]
B --> C[Schema 化页面描述]
C --> D[DSL Domain Language]
D --> E[低代码可视化平台]

第一阶段：组件封装

例如封装一个 Banner 组件：

<template>
  <img :src="data.imgUrl" :alt="data.alt" />
</template>

<script setup>
defineProps(['data'])
</script>

用户通过：

<Banner :data="xxx" />

缺点是页面结构和内容写死

第二阶段：配置驱动组件渲染

使用配置 JSON 渲染多个组件：

const pageConfig = [
  { type: 'banner', props: { imgUrl: '/a.jpg' } },
  { type: 'form', props: { fields: [...] } },
  { type: 'table', props: { columns: [...], api: '/list' } }
]

动态渲染：

<component :is="resolveComponent(cfg.type)" v-bind="cfg.props" v-for="cfg in pageConfig" />

resolveComponent 映射到注册组件即可

第三阶段：页面级 Schema 驱动

借助 JSON Schema 或自定义结构：

{
  "page": {
    "title": "用户列表",
    "body": [
      { "type": "searchForm", "fields": ["name", "age"] },
      { "type": "dataTable", "columns": ["name", "age"], "api": "/api/user/list" }
    ]
  }
}

优势：

• 配置结构统一
• 支持权限、权限码、条件展示等逻辑嵌套
• 页面=数据，无需写前端

第四阶段：抽象领域 DSL

引入领域语言 DSL（Domain Specific Language），封装业务语义：

page:
  title: 用户中心
  layout: vertical
  components:
    - $form:
        bind: userForm
        fields:
          - $input: { label: 姓名, key: name }
          - $select: { label: 性别, key: gender, options: 男/女 }
    - $dataTable:
        bind: userList
        api: /api/user/list
        columns: [name, gender]

优势：

• 易读性强
• 与业务语义解耦（非组件）
• 可导出/导入、版本化、存储数据库

第五阶段：可视化低代码平台

引擎层核心模块：

现成方案：

• 百度 amis
• 阿里 lowcode-engine

核心代码：渲染引擎简版

function renderSchema(schema) {
  return schema.components.map(cfg => {
    const Comp = componentMap[cfg.type]
    return <Comp {...cfg.props} />
  })
}

支持嵌套、权限、条件展示：

if (cfg.permission && !hasPermission(cfg.permission)) return null
if (cfg.visible === false) return null

平台与团队协作模式重构